<template>
    <div class="content">
        <div class="el-card__body">
            <el-form :model="form" :rules="rules">
                <el-form-item label="品牌名称:" prop="name">
                    <el-input v-model="form.name" size="large" />
                </el-form-item>
                <el-form-item size="large" label="品牌首字母:">
                    <el-input v-model="form.firstLetter" />
                </el-form-item>
                <el-form-item label="品牌LOGO:">
                    <el-upload class="upload-demo" v-model:file-list="LoGoUrlFileList" action="http://120.24.64.5:8088/mall-admin/minio/upload" :before-remove="beforeLOGORemove" multiple
                        :limit="1" list-type="picture">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌专区大图:">
                    <el-upload  v-model:file-list="bigPicFileList" class="upload-demo" action="http://120.24.64.5:8088/mall-admin/minio/upload" :before-remove="beforeBigPicRemove" multiple
                        :limit="1" list-type="picture">
                        <el-button type="primary">点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                只能上传jpg/png文件，且不超过100kb
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌故事:">
                    <el-input type="textarea" v-model="form.brandStory" />
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="form.sort" size="large" />
                </el-form-item>
                <el-form-item label="是否显示:">
                    <el-radio-group v-model="showRadio" @change="showGroup(Number(showRadio))">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="品牌制造商:">
                    <el-radio-group v-model="factoryRadio" @change="factoryGroup(Number(factoryRadio))">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitFn">提交</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup lang="ts">
import {getUpdateBrandApi,UpdateBrandApi } from "./api";
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { UploadUserFile ,UploadProps} from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();


const form = reactive<IBrandModel>({
    bigPic: "",
    id:0,
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    productCommentCount: 0,
    productCount: 0,
    showStatus: 0,
    sort: 0
});
const factoryRadio = ref(0);
const showRadio = ref(0);
const bigPicUrl = ref<any>("")
const bigPicName = ref("")
const bigPicFileList = ref<any[]>([
  {
    name: bigPicName,
    url: bigPicUrl,
  },
])
const LoGoUrl = ref<any>("")
const LoGoName = ref("")
const LoGoUrlFileList = ref<any[]>([
  {
    name: LoGoName,
    url: LoGoUrl,
  },
])
const beforeLOGORemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定要删除图片 ${uploadFile.name} 吗?`
    ).then(
        () => true,
        () => false
    )
}
const beforeBigPicRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定要删除图片 ${uploadFile.name} 吗?`
    ).then(
        () => true,
        () => false
    )
}
// 品牌制造商单选
form.factoryStatus = Number(factoryRadio.value);
const factoryGroup = (factoryRadio: number) => {
    form.factoryStatus = factoryRadio;
};
// 是否显示单选
form.showStatus = Number(showRadio.value);
const showGroup = (showRadio: number) => {
    form.showStatus = showRadio;
};
const rules = {
    name: [{ required: true, trigger: "blur", message: "请输入品牌名称" }],
};


if(route.query.id){
    getUpdateBrandApi(parseInt(route.query.id as string)).then((res)=>{
        if (res.code === 200) {
            Object.assign(form, res.data)
            bigPicUrl.value=res.data.bigPic
            bigPicName.value=res.data.bigPic.substring(res.data.bigPic.lastIndexOf('/')+1)
            LoGoUrl.value=res.data.logo
            LoGoName.value=res.data.logo.substring(res.data.logo.lastIndexOf('/')+1)
            factoryRadio.value=res.data.factoryStatus
            showRadio.value=res.data.showStatus
          }
    })
}



// 提交
const submitFn = () => {
    ElMessageBox.confirm("确定要修改品牌吗？", "修改品牌", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
        UpdateBrandApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          router.push("/pms/brand");
        }
      });
    })
    .catch(() => {});
}

</script>

<style lang="less" scoped>
.content {
    width: 800px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;

    .el-card__body {
        width: 760px;
        padding: 20px;
    }
}
</style>